<style>
    .tr_u td{
        color:#2c8fad;
    }
</style>
<template>
<div>
     <Modal v-model="modal" :title="title" :styles="{width:'1100px',top:'20px'}"  
     :mask-closable="false" @on-cancel="cancel">
        
        <div style="margin-top:10px;">
            <div class="ivu-table-wrapper" >
                <div class="ivu-table ivu-table-with-fixed-top ">
                    <div class="ivu-table-body" >
                        <table  class="table_border _table1"   cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
                           
                            <thead>
                                <tr>
                                    <th class="">
                                        <div class="ivu-table-cell">
                                            <span>商品</span>
                                        </div>
                                    </th>
                                    <th class="">
                                        <div class="ivu-table-cell">
                                            <span>商品规格</span>
                                        </div>
                                    </th>
                                    <th class="" >
                                        <div class="ivu-table-cell">
                                            <span>数量</span>
                                        </div>
                                    </th>
                                    <th class="">
                                        <div class="ivu-table-cell">
                                            <span>金额</span>
                                        </div>
                                    </th>
                                    <!-- <th class="" style="width:27%;">
                                        <div class="ivu-table-cell">
                                            <span>发票号</span>
                                        </div>
                                    </th> -->
                                    <th class="" style="width:140px;">
                                        <div class="ivu-table-cell">
                                            <span>  操作</span>
                                        </div>
                                    </th>
                                </tr>
                            </thead>
                            <tbody class="ivu-table-tbody" v-for="item in relationList">
                                <tr class="ivu-table-row">
                                    <td class="">
                                        <div class="ivu-table-cell">
                                            <span>{{item.goodsName}}</span>
                                        </div>
                                    </td>
                                    <td class="">
                                        <div class="ivu-table-cell">
                                            <span>{{item.goodsSpecification}}</span>
                                        </div>
                                    </td>
                                    <td class="">
                                        <div class="ivu-table-cell">
                                            <span>{{item.goodsQuantity}}</span>
                                        </div>
                                    </td>
                                    <td class="">
                                        <div class="ivu-table-cell">
                                            <span>{{item.goodsTotalPriceTax}}元</span>
                                        </div>
                                    </td>
                                    <!-- <td class="">
                                        <div class="ivu-table-cell">
                                            <span v-for="is in item.invoiceList">
                                                {{is.incomeInvoiceGuid}}
                                            </span>
                                        </div>
                                    </td> -->
                                    <td class="">
                                        <div class="ivu-table-cell">
                                            <!--  -->
                                            <Button @click="item.show=!item.show" size="small" 
                                            >{{item.show?'收起':'详情'}}</Button>
                                            <Button 
                                                    size="small"
                                                    :type="item.check?'primary':'ghost'" 
                                                    @click="setcheck(item)">
                                                        {{item.check?'已选择':'选择'}}
                                             </Button>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="tr_1" v-show="item.show">
                                    <td colspan="5">
                                        <div style="margin:0px 20px;">
                                            <table class="table_7b">
                                                <thead>
                                                    <th>发票号码</th>
                                                    <th>发票编码</th>
                                                    <th>使用数量</th>
                                                    <th>操作</th>
                                                </thead>
                                                <tbody>
                                                    <tr v-for="ib in item.invoiceList">
                                                        <td>{{ib.incomeInvoiceNo}}</td>
                                                        <td>{{ib.incomeInvoiceCode}}</td>
                                                        <td>{{ib.useAmount}}</td>
                                                        <td>
                                                            <Button  v-on:click="delSys(ib)" type="error"  size="small" >撤销关联</Button>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                
            </div>
        </div>
        <div style="margin-top:10px;border-top:1px #ccc dashed;margin-bottom:20px;"></div>
        <Row :gutter="20">
            <Col span="12">
                <Row :gutter="10">
                    <!-- <Col span="10">
                        <Select  style="width:100%">
                            <Option value="1">出库单|结算单</Option>
                        </Select>
                    </Col> -->
                    <Col span="10">
                        <Input  placeholder="商品名称" v-model="sear_name"></Input>
                    </Col>
                    <Col span="4">  
                     <Button type="primary"  @click="getdata('addForm')" >查询商品 </Button>
                    </Col>
                </Row>
                <br/>
                <div style="margin-top:0px;">
                    <div class="ivu-table-wrapper table_s1" >
                        <div class="ivu-table ivu-table-with-fixed-top ">
                            <div class="ivu-table-body" >
                                <table  class="table_border _table2"   cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
                                   
                                    <thead>
                                        <tr>
                                            <!-- <th class="ivu-table-column-center" style="width:40px;">
                                                <div class="ivu-table-cell">
                                                    <Checkbox v-model="check" lable="" 
                                                    @on-change="checkchange(unrelationList,$event)"></Checkbox>
                                                </div>
                                                <div class="ivu-table-cell">
                                                    <span>选择</span>
                                                </div>
                                            </th> -->
                                            <th class="" style="width:150px;">
                                                <div class="ivu-table-cell">
                                                    <span>商品</span>
                                                </div>
                                            </th>
                                            <th class="">
                                                <div class="ivu-table-cell">
                                                    <span>商品规格</span>
                                                </div>
                                            </th>
                                            <th class="" style="width:60px;">
                                                <div class="ivu-table-cell">
                                                    <span>  数量</span>
                                                </div>
                                            </th>
                                            <th class="" style="width:150px;">
                                                <div class="ivu-table-cell">
                                                    <span>编码</span>
                                                </div>
                                            </th>
                                            <th class="">
                                                <div class="ivu-table-cell">
                                                    <span>操作</span>
                                                </div>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody class="ivu-table-tbody">
                                        <tr class="ivu-table-row"
                                        :class="{tr_u:item.check}"
                                         v-for="(item,index) in unrelationList" :key="index">
                                            <!-- <td class="ivu-table-column-center">
                                                <div class="ivu-table-cell">
                                                    <Radio  lable="" v-model="check"></Radio>
                                                </div>
                                            </td> -->
                                            <td class="">
                                                <div class="ivu-table-cell">
                                                    <span>{{item.goodsName}}</span>
                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="ivu-table-cell">
                                                    <span>{{item.goodsSpecification}}</span>
                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="ivu-table-cell">
                                                    <span>  {{item.goodsQuantity}}</span>
                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="ivu-table-cell">
                                                    <span>  {{item.goodsCode}}</span>
                                                </div>
                                            </td>
                                             <td class="">
                                                <div class="ivu-table-cell">
                                                    <Button 
                                                    size="small"
                                                    :type="item.check?'primary':'ghost'" 
                                                    @click="setcheck(item)">
                                                        {{item.check?'已选择':'选择'}}
                                                    </Button>

                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        
                    </div>
                </div>
                
            </Col>
            <Col span="12">
                <Row :gutter="10">
                    <Col span="10">
                        <Input  placeholder="商品名称" v-model="goods_name"></Input>
                    </Col>
                    <Col span="10">
                        <Input  placeholder="   发票号码" v-model="invoice_no"></Input>
                    </Col>
                    <Col span="4">  
                     <Button type="primary"  @click="getright('addForm')" >查询发票 </Button>
                    </Col>
                </Row>
                <br/>
                
                <div style="margin-top:0px;">
                    <div class="ivu-table-wrapper table_s1" >
                        <div class="ivu-table ivu-table-with-fixed-top ">
                            <div class="ivu-table-body" >
                                <table  class="table_border _table3"   cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
                                   
                                    <thead>
                                        <tr>
                                            <th class="ivu-table-column-center" style="width:40px;">
                                                <div class="ivu-table-cell">
                                                    <Checkbox v-model="checkr" lable="" 
                                                    @on-change="checkchange(dataright,$event)"></Checkbox>
                                                </div>
                                            </th>
                                            <th class="">
                                                <div class="ivu-table-cell">
                                                    <span>发票编码</span>
                                                </div>
                                            </th>
                                            <th class="">
                                                <div class="ivu-table-cell">
                                                    <span>发票号码</span>
                                                </div>
                                            </th>
                                            <th class="">
                                                <div class="ivu-table-cell">
                                                    <span>商品名称 </span>
                                                </div>
                                            </th>
                                            <th class="" style="width:90px;">
                                                <div class="ivu-table-cell">
                                                    <span>商品编码</span>
                                                </div>
                                            </th>
                                            <th class="" style="width:75px;">
                                                <div class="ivu-table-cell">
                                                    <span>可开票数量</span>
                                                </div>
                                            </th>
                                           <!--  <th class="">
                                                <div class="ivu-table-cell">
                                                    <span>操作</span>
                                                </div>
                                            </th> -->
                                        </tr>
                                    </thead>
                                    <tbody class="ivu-table-tbody">
                                        <tr class="ivu-table-row" v-for="(item,index) in dataright" :key="index">
                                            <td class="ivu-table-column-center">
                                                <div class="ivu-table-cell">
                                                    <Checkbox  lable="" v-model="item.check"></Checkbox>
                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="ivu-table-cell">
                                                    <span>{{item.invoice_code}}</span>
                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="ivu-table-cell">
                                                    <span>{{item.invoice_no}}</span>
                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="ivu-table-cell">
                                                    <span>  {{item.goods_name}}</span>
                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="ivu-table-cell">
                                                    <span>  {{item.goods_code}}</span>
                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="ivu-table-cell">
                                                    <span>  {{item.goods_quantity_left}}</span>
                                                </div>
                                            </td>
                                            <!-- <td class="">
                                                <div class="ivu-table-cell">
                                                    <a>使用说明</a>
                                                </div>
                                            </td> -->
                                        </tr>
                                    </tbody>
                                </table>
                                <div class="body_empty" v-if="dataright.length==0 ">
                                    暂无数据
                                </div>
                            </div>
                        </div>
                        
                    </div>
                </div>
            </Col>
        </Row>

         <div slot="footer">
             <Button @click="cancel()">关闭</Button>
             <Button type="primary" @click="submit('addForm')" >保存关联</Button>
         </div>
     </Modal>
</div>
</template>
<script>
 export default {
     data (){
         return {
             modal:false,title:'两票自证',check:1,checkr:false,f:0,
             sear_name:'',goodguid:'',goods_name:'',invoice_no:'',
             dataright:[
                
             ],relationList:[],unrelationList:[]
         }
     },methods:{
         findSys(){
             let param = {
                 pageNo: 0,
                 pageSize: 999
                 
             }
         },
         showdata(params){
            this.modal=true;
            this.guid=params;
            
            this.getright();
            this.getdata();
            if(this.f==0){
                this.f=1;
                this.red();
            }
         },getdata(){
            this.axios.post('/incomeinvoice/orderDetail',
                {guid:this.guid,goodsName:this.sear_name}).then((res)=>{
                    console.log(res);
                    if(res.errorCode==0){
                        var d=res.data.relationList;
                        for(var i=0;i<d.length;i++){
                            d[i].show=false;
                            d[i].check=false;
                        }
                        this.relationList=d;
                        var p=res.data.unrelationList;
                        for(var i=0;i<p.length;i++){
                            p[i].check=false;
                        }
                        this.unrelationList=p;
                    }
                    
            })
         },
         getright(code){
            this.axios.post('/incomeinvoice/getIncomeInvoiceListByGoodCode',
                {goods_name:this.goods_name,invoice_no:this.invoice_no}).then((res)=>{
                    console.log(res);
                    if(res.errorCode==0){
                        this.dataright=res.data;
                    }
                    
            })
         },
         delSys(params){
            this.$Modal.confirm({
                 title:'删除提示',
                 content: '<p>确定撤销关联？</p>',
                 onOk:()=>{
                     this.axios.post('/incomeinvoice/delRelation',
                        {
                            orderGuid:this.guid,
                            incomeInvoiceGuid:params.incomeInvoiceGuid,
                            orderDetailGuid:params.orderDetailGuid,
                            incomeInvoiceDetailGuid:params.incomeInvoiceDetailGuid
                        }).then((res)=>{
                        if(res.errorCode==0){
                            this.$Message.success(res.message);
                            this.dataright=[];
                            this.unrelationList=[];
                            this.check=false;
                            this.checkr=false;
                            this.getright();
                            this.getdata();
                        }else{
                            //this.$Message.error(res.message);
                        }
                        
                    })
                }
            })
         },
         submit(){
             
                 // var goodGuids=[];
                 // this.unrelationList.forEach((i)=>{
                 //    if(i.check){
                 //        goodGuids.push(i.guid)
                 //    }
                 // })
                 var invoiceGuids=[];
                 this.dataright.forEach((i)=>{
                    if(i.check){
                        invoiceGuids.push(i.guid)
                    }
                 })
                 if(this.goodguid==''){
                    this.$Message.error('请选择商品');
                    return ;
                 }
                 if(invoiceGuids.length<1){
                    this.$Message.error('请勾选发票');
                    return;
                 }

                 var obj={invoiceGuids:invoiceGuids,goodGuid:this.goodguid,
                    orderGuid:this.guid}
                 this.axios.post('/incomeinvoice/addRelation',
                    obj).then((res)=>{
                     console.log(res)
                        if(res.errorCode==0){
                            this.$Message.success('成功');
                            //this.$emit('refresh');
                            this.dataright=[];
                            this.unrelationList=[];
                            this.check=false;
                            this.checkr=false;
                            this.goodguid='';
                            this.getright();
                            this.getdata();
                        }
                     
                 }) 
                 
             
         },
         cancel(){
             this.modal=false;
             this.$emit('refresh');
         },checkchange(data,item){  
            data.forEach(function(val){
                val.check=item;
            })
        },red(){
            setTimeout(function(){
                $('._table1').resizableColumns({});
                //$('._table2').resizableColumns({});
                //$('._table3').resizableColumns({});
            },1000)
            
        },setcheck(item){

            if(item.check!=true){
                console.log(item.check);
                this.unrelationList.forEach((i)=>{
                    i.check=false;
                })
                this.relationList.forEach((i)=>{
                    i.check=false;
                })
                item.check=true;
                this.goodguid=item.guid;
                //this.getright(item.goodsCode)
            }
        }
     },created(){
         this.$bus.on('bus_settlementedit', this.showdata);
         
     },beforeDestroy(){
         this.$bus.off('bus_settlementedit',this.showdata)
     }
 }
</script>
